<template>
  <div class="m-artHeader">
    <div class="m-artHeader-left">
      <el-image :src="aside"></el-image>
      <el-image :src="logo" class="logo"></el-image>
      <el-image :src="title"></el-image>
    </div>
    <div class="m-artHeader-right">
      <!-- <el-image :src="book"></el-image>
      <el-image :src="info"></el-image>
      <el-image :src="help"></el-image> -->
      <el-image :src="user"></el-image>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      aside: require("../assets/img/aside.png"),
      logo: require("../assets/img/logo.svg"),
      title: require("../assets/img/title.jpg"),
      book: require("../assets/img/book.png"),
      info: require("../assets/img/info.png"),
      help: require("../assets/img/help.png"),
      user: require("../assets/img/user.png"),
    };
  },
  watch: {
    $route(route) {
      console.log(route);
      const { meta, query, fullPath, params } = route;
      const { index, title } = meta;
      console.log(JSON.parse(sessionStorage.getItem("breadcrumbStorage")));
      let breadcrumb = JSON.parse(sessionStorage.getItem("breadcrumbStorage"));
      breadcrumb = breadcrumb
        ? breadcrumb.slice(0, index)
        : [{ path: "/", name: "应用设计器" }];
      if (index == 0) {
        breadcrumb = [{ path: "/", name: "应用设计器" }];
      } else {
        breadcrumb[index] = { path: fullPath, name: query.name, params };
        breadcrumb.push({ name: title });
        console.log(meta, query);
      }
      console.log(breadcrumb);
      sessionStorage.setItem("breadcrumbStorage", JSON.stringify(breadcrumb));
      // if (route.path.startsWith('/redirect/')) {
      //   return
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
.m-artHeader {
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding-right: 30px;
  position: relative;
  box-shadow:0px 2px 4px rgb(0 0 0 / 30%);
  .m-artHeader-left {
    height: 50px;
    display: flex;
    align-items: center;
  }
  .m-artHeader-right {
    height: 50px;
    width: 168px;
    display: flex;
    align-items: center;
    justify-content:flex-end;
  }
}
.logo {
  margin: 0 8px;
}
</style>